<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>行为表现测评</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description"/>
    <meta content="Coderthemes" name="author"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- App favicon -->
    <link rel="shortcut icon" href="./assets/images/favicon.ico">

    <!-- App css -->
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/app.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<!-- Begin page -->
<div id="wrapper">

    <!-- ========== Left Sidebar Start ========== -->
    <div th:replace="commons/sideBar :: sidebar"/>
    <!-- Left Sidebar End -->


    <div class="content-page">
        <div class="content">

            <!-- Topbar Start -->
            <div th:replace="commons/topBar :: topbar "/>
            <!-- end Topbar -->

            <!-- Start Content-->
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                                    <li class="breadcrumb-item active">行为表现</li>
                                </ol>
                            </div>
                            <h4 class="page-title">行为表现（折算分（10%））</h4>
                        </div>
                    </div>
                </div>
                <!-- end page title -->
            </div>
            <input type="hidden" th:if="${prenhensiveList.size() != 0}" th:value="${prenhensiveList.size()}" value="1"
                   id="prenhensiveNum">


            <!-- ============================================================== -->
            <!-- Start Page Content here -->
            <!-- ============================================================== -->
            <div class="" style="width: 60%;">
                <div class="card-body">
                    <h4 class="mb-3 header-title">扣分项：</h4>
                    <button class="btn btn-info  " id="add_btn" th:if="${prenhensiveList.size() == 0}" style="margin-bottom: 10px">添加项</button>
                    <button class="btn btn-info  " id="add_btn" disabled th:if="${prenhensiveList.size() != 0}" style="margin-bottom: 10px">添加项</button>
                    <button class="btn btn-warning  " id="del_btn"  th:if="${prenhensiveList.size() == 0}" style="margin-bottom: 10px">删除最后一项</button>
                    <button class="btn btn-warning  " id="del_btn" disabled th:if="${prenhensiveList.size() != 0}" style="margin-bottom: 10px">删除最后一项</button>
                    <hr/>
                    <form class="form-horizontal" id="behaviorForm">


                        <!--扣分项start-->
                        <div id="item">

                            <!--                            <tr th:each="entries,stat:${prenhensiveList}" >-->
                            <!--                                <td th:text="${stat.count}"></td>-->
                            <!--                                <td th:text="${entries['sid']}"></td>-->
                            <!--                                <td th:text="${entries['sname']}"></td>-->
                            <!--                                <td th:text="${entries['sage']}"></td>-->
                            <!--                                &lt;!&ndash; 写法一：-->
                            <!--                                <td th:text="${entries['scourse']['cname']}"></td>-->
                            <!--                                <td th:text="${entries['scourse']['cscore']}"></td>&ndash;&gt;-->
                            <!--                                &lt;!&ndash; 写法二：-->
                            <!--                                <td th:text="*{entries['scourse']['cname']}"></td>-->
                            <!--                                <td th:text="*{entries['scourse']['cscore']}"></td>&ndash;&gt;-->
                            <!--                                &lt;!&ndash; 写法三：&ndash;&gt;-->
                            <!--                                <td th:object="${entries['scourse']}">-->
                            <!--                                    <span th:text="*{['cname']}"></span>-->
                            <!--                                </td>-->
                            <!--                                <td th:object="${entries['scourse']}">-->
                            <!--                                    <span th:text="*{['cscore']}"></span>-->
                            <!--                                </td>-->
                            <!--                            </tr>-->
                            <!--                            $("#item").append("<div class=\"form-group row mb-3\" id='divItem"+itemID.id+"'>\n" +-->
                            <!--                            "                                <label for='itemContent"+itemID.id+"' class=\"col-3 col-form-label\">第"+itemID.id+"项：</label>\n" +-->
                            <!--                            "                                <div class=\"col-9\">\n" +-->
                            <!--                            "                                    <input class=\"form-control myAllContents col-6\" style=\"float: left;\" id='itemContent"+itemID.id+"' name='itemContent"+itemID.id+"' placeholder='请输入内容'>\n" +-->
                            <!--                            "                                    <label for='itemPoint"+itemID.id+"' class=\"col-3  col-form-label\">扣分：</label>\n" +-->
                            <!--                            "                                    <input type=\"number\"  id='itemPoint"+itemID.id+"' name='itemPoint"+itemID.id+"' class=\"form-control myAllPosints col-3\"style=\"float: right;\" placeholder='扣分'>\n" +-->
                            <!--                            "                                </div>\n" +-->
                            <!--                            "                            </div>");-->
                            <!--                        itemID.id=itemID.id+1;-->

                            <div th:if="${prenhensiveList.size() != 0}" th:each="prenhensive,num : ${prenhensiveList}"
                                 class="form-group group-all-date row mb-3 " th:id="'divItem'+(${num.index}+1)">
                                <label th:for="'itemContent'+(${num.index}+1)" class="col-3 col-form-label"
                                       th:text="'第'+${num.count}+'项'">第1项：</label>
                                <div class="col-9">
                                    <input readonly="readonly" class="form-control myEditInput  col-6" style="float: left;"
                                           th:id="'itemContent'+(${num.index}+1)"
                                           th:name="'itemContent'+(${num.index}+1)"
                                           th:value="${prenhensive.getPrehensivePerformanceEvaluationContent()}"
                                           placeholder="">
                                    <label th:for="'itemPoint'+(${num.index}+1)"
                                           class="col-3 col-form-label">分值：</label>
                                    <input readonly="readonly" type="number" class="form-control myEditInput myAllPosints col-3" style="float: right;"
                                           th:id="'itemPoint'+(${num.index}+1)" th:name="'itemPoint'+(${num.index}+1)"
                                           th:value="${prenhensive.getPoint()}" placeholder="">
                                </div>
                            </div>

                        </div>
                        <!--扣分项end-->

                        <div class="form-group row mb-3">
                            <label for="score" class="col-3 col-form-label">预计得分：</label>
                            <div class="col-9">
                                <input th:value="${score}" class="form-control disabled" id="score"
                                       placeholder="默认10分" value="10" readonly="readonly">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label for="score" class="col-3 col-form-label">当前状态：</label>
                            <div class="col-9">
                                <span class="badge badge-secondary badge-secondary-hcl  badge-pill notSub" style="margin-top: 10px" th:if="${prenhensiveList.size() !=0 && prenhensiveList.get(0).getStatus()==0}">未提交</span>
                                <span class="badge badge-secondary badge-secondary-hcl badge-pill notSub" style="margin-top: 10px" th:if="${prenhensiveList.size() ==0 }">未提交</span>
                                <span class="badge  badge-info badge-info-hcl badge-pill notSub" style="margin-top: 10px" th:if="${prenhensiveList.size() !=0 && prenhensiveList.get(0).getStatus()==1}">待审核</span>
                                <span class="badge badge-success badge-pill" style="margin-top: 10px" th:if="${prenhensiveList.size() !=0 && prenhensiveList.get(0).getStatus()==2}">审核通过</span>
                                <span class="badge badge-danger badge-danger-hcl badge-pill" style="margin-top: 10px" th:if="${prenhensiveList.size() !=0 && prenhensiveList.get(0).getStatus()==3}">待修改</span>
                            </div>
                        </div>
                        <div class="form-group row mb-3" id="msg" th:if="${prenhensiveList.size() !=0 && prenhensiveList.get(0).getStatus()==3  }">
                            <label for="score" class="col-3 col-form-label">驳回原因：</label>
                            <div class="col-9" style="padding-top: 8px">
                                <span th:text="${prenhensiveList.get(0).getMsg()}" style="color: red"></span>
                            </div>
                        </div>

                        <div class="form-group mb-0 justify-content-end row">
                            <div class="col-9">
                                <button type="submit" id="submit_btn"  class="btn btn-info" th:if="${prenhensiveList.size() == 0}">提交</button>
                                <button type="submit" id="submit_btn" disabled class="btn btn-info"  th:if="${prenhensiveList.size() != 0}">提交</button>
                                <button type="submit" id="reEdit" class="btn btn-danger "  th:if="${prenhensiveList.size() != 0 && prenhensiveList.get(0).getStatus() == 3}">编辑</button>
                                <button type="submit" id="reEdit" class="btn btn-danger" disabled  th:if="${prenhensiveList.size() == 0 }">编辑</button>
                                <button type="submit" id="reEdit" class="btn btn-danger"   th:if="${prenhensiveList.size() != 0 && prenhensiveList.get(0).getStatus() == 1}">编辑</button>
                                <button type="submit" id="reEdit" class="btn btn-danger"  disabled  th:if="${prenhensiveList.size() != 0 && prenhensiveList.get(0).getStatus() == 2}">编辑</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->
</div>


<!-- Footer Start -->
<div th:replace="commons/footer :: foot"></div>
<!-- end Footer -->


<!-- App js -->
<script src="./js/vendor.js"></script>
<script src="./js/app.js"></script>

<!-- Plugins js -->
<script src="./js/vendor/Chart.bundle.js"></script>
<script src="./js/vendor/jquery.sparkline.min.js"></script>
<script src="./js/vendor/jquery.knob.min.js"></script>
<script src="./js/layer/layer.js"></script>
<script src="./js/pages/dashboard.init.js"></script>
<script>
    $("#del_btn").hide();

    function itemNum() {
        this.id = 1;
    }

    itemID = new itemNum();
    itemID.id = isNaN($("#prenhensiveNum").val()) ? 1 : (parseInt($("#prenhensiveNum").val()) + 1);
    if (itemID.id > 1) $("#del_btn").show();

    $("#del_btn").click(function () {

        var last = itemID.id - 1;
        $("#divItem" + last).remove();

        if (itemID.id == 2) {
            $(this).hide();
            $("#score").val(10);
        }
        itemID.id = itemID.id - 1;

        //计算
        var sum = 0;
        if ($(this).val() < 0) {
            $(this).val("0");
            layer.tips('输入不是正确值！', $(this), {
                tips: [2, '#ff0000']
            });
        }

        $(".myAllPosints").each(function () {
            sum += Number($(this).val());
        });

        $("#score").val((100 - sum) * 0.1 < 0 ? "0" : ((100 - sum) * 0.1).toFixed(2));
    });

    $("#add_btn").click(function () {

        if (itemID.id != 1) {
            var before = itemID.id - 1;
            if ($("#itemContent" + before).val() == "") {
                layer.tips('请输入内容', "#itemContent" + before, {
                    tips: [4, '#ff0000']
                });
                return;
            }
            if ($("#itemPoint" + before).val() == 0) {
                layer.tips('输入不是正确值!', "#itemPoint" + before, {
                    tips: [2, '#ff0000']
                });
                return;
            }
            if ($("#itemPoint" + before).val() < 0) {
                layer.tips('输入不正确，只能为大于0', "#itemPoint" + before, {
                    tips: [2, '#ff0000']
                });
                return;
            }
        }

        $("#del_btn").show();
        if (itemID.id > 10) {
            layer.msg("最多添加10项");
        } else {
            $("#item").append("<div class=\"form-group group-all-date row mb-3\" id='divItem" + itemID.id + "'>\n" +
                "                                <label for='itemContent" + itemID.id + "' class=\"col-3 col-form-label\">第" + itemID.id + "项：</label>\n" +
                "                                <div class=\"col-9\">\n" +
                "                                    <input class=\"form-control myAllContents myEditInput col-6\" style=\"float: left;\" id='itemContent" + itemID.id + "' name='itemContent" + itemID.id + "' placeholder='请输入内容'>\n" +
                "                                    <label for='itemPoint" + itemID.id + "' class=\"col-3  col-form-label\">扣分：</label>\n" +
                "                                    <input type=\"number\"  id='itemPoint" + itemID.id + "' name='itemPoint" + itemID.id + "' class=\"form-control myAllPosints myEditInput col-3\"style=\"float: right;\" placeholder='扣分'>\n" +
                "                                </div>\n" +
                "                            </div>");
            itemID.id = itemID.id + 1;
        }
    });

    $(document).delegate(".myAllPosints", "input propertychange", function () {
        var sum = 0;
        if ($(this).val() < 0) {
            $(this).val("0");
            layer.tips('输入不是正确值！', $(this), {
                tips: [2, '#ff0000']
            });
        }

        $(".myAllPosints").each(function () {
            sum += Number($(this).val());
        });

        $("#score").val((100 - sum) * 0.1 < 0 ? "0" : ((100 - sum) * 0.1).toFixed(2));
    });

    // 提交按钮
    $("#submit_btn").click(function (e) {
        e.preventDefault();
        var tip = 0;
        var isTrue = true;
        $(".myAllContents").each(function () {
            if ($(this).val() == 0) {
                layer.tips('没有输入值或不是正确值！', $(this), {
                    tips: [2, '#ff0000']
                });
                tip = tip + 1;
                isTrue = false;
                return false;
            }
        });

        if (tip == 0) {
            $(".myAllPosints").each(function () {
                if ($(this).val() == 0 || $(this).val() == "") {
                    layer.tips('没有输入值或不是正确值！', $(this), {
                        tips: [2, '#ff0000']
                    });
                    isTrue = false;
                    return false;
                }
            });
        }

        if (isTrue) {
            //信息无误：
            var form = $("#behaviorForm").serialize();
            $.post("/stuInfoSystem/doBehaviorPerformance", form, function (data) {
                if (data.state == "0") {
                    layer.msg(data.msg);
                } else {
                    layer.msg(data.msg,{icon:1});

                    $("#add_btn").attr("disabled","disabled");
                    $("#del_btn").attr("disabled","disabled");
                    $(".myEditInput").attr("readonly","readonly");
                    $("#submit_btn").attr("disabled","disabled");
                    $("#reEdit").removeAttr("disabled");

                    // 更改当前状态
                    $(".badge-secondary-hcl").addClass("badge-info");
                    $(".badge-secondary-hcl").text("待审核");
                    $(".badge-secondary-hcl").removeClass("badge-secondary");

                    $(".badge-danger-hcl").addClass("badge-info");
                    $(".badge-danger-hcl").text("待审核");
                    $(".badge-danger-hcl").removeClass("badge-danger");

                    // 移除驳回信息
                    $("#msg").remove();
                }
            });
        }
    });

    // 重新编辑
    $("#reEdit").click(function (e) {
        e.preventDefault();
        // 解除添加项和删除最后一项按钮的禁用
        $("#add_btn").removeAttr("disabled");
        $("#del_btn").removeAttr("disabled");
        // 更改当前状态
        $(".badge-info-hcl").addClass("badge-secondary");
        $(".badge-info-hcl").text("未提交");
        $(".badge-info-hcl").removeClass("badge-info");
        // 唤醒提交按钮
        $("#submit_btn").removeAttr("disabled");
        // 禁用编辑按钮
        $(this).attr("disabled","disabled");

        //解禁input
        $(".myEditInput").removeAttr("readonly");
    });


</script>
</body>
</html>